<template>
  <view class="page-classify">
    <headerSearch class="classify-search"></headerSearch>
    <view class="classify-container">
      <uiCategory
        :categoryList="typeList"
        :subCategoryList="lessionList"
        rightBoxClass="classify-right--container"
        @categoryMainClick="handleClickSearchType"
      >
        <template v-slot:rightheader>
          <view class="classify-right--image">
            <image class="classify-right--image-image" src="/static/images/lesson/banner2.png" />
          </view>
        </template>
        <template v-slot:rightcontent>
          <view class="classify-right--content">
            <view
              class="classify-lesson--container ui-1px-b"
              v-for="item in lessionList"
              :key="item.lessonId"
            >
              <lesson
                :lessonPicPath="item.lessonPicPath"
                :lessonId="item.lessonId"
                :lessonName="item.lessonName"
                :lecturePic="item.lecturePic"
                :lecturerName="item.lecturerName"
                :subNum="item.subNum"
                :clickNum="item.clickNum"
                :lessonPrice="item.lessonPrice"
                :isVipLesson="item.isVipLesson"
                :lessonCheapPrice="item.lessonCheapPrice"
                class="classify-lesson"
              ></lesson>
            </view>
          </view>
        </template>
      </uiCategory>
    </view>
  </view>
</template>

<script>
import uiCategory from "@/components/business/category/index";
import lesson from "@/components/business/lession/lesson-search.vue";
import headerSearch from "@/components/business/header-search/index";

import { selectLessonByName } from "api/order/lession.js";
export default {
  name: "homePage",
  components: {
    uiCategory,
    lesson,
    headerSearch
  },
  data() {
    return {
      typeList: [
        {
          value: 1,
          label: "公证实务课程"
        },
        {
          value: 2,
          label: "创新业务辅导"
        },
        {
          value: 3,
          label: "法务语言培训"
        },
        {
          value: 4,
          label: "定制培训课程"
        }
      ],

      activeKey: 0,
      isloading: false,
      finished: false,
      lessionList: [],
      page: {
        currentPage: 1,
        pageNumber: 10
      }
    };
  },
  created() {
    this.load();
  },
  mounted() {},
  methods: {
    /**
     * 点击切换不同的语言类型
     */
    handleClickSearchType(item) {
      this.activeKey = item.value;
      this.isloading = true;
      this.lessionList = [];
      this.finished = false;
      this.page.currentPage = 1;
      this.loadLessonByNamePageFn(false);
    },
    onRefresh() {
      this.isloading = true;
      this.lessionList = [];
      this.finished = false;
      this.page.currentPage = 1;
      this.loadLessonByNamePageFn(false);
    },
    load() {
      if (this.lessionList.length) {
        this.page.currentPage += 1;
        this.loadLessonByNamePageFn(true);
      } else {
        this.loadLessonByNamePageFn(false);
      }
    },
    // 课程页
    loadLessonByNamePageFn(isConcat = false) {
      var params = {
        page: this.page,
        lessonClass: this.activeKey === 0 ? 1 : this.activeKey
      };
      var _this = this;
      selectLessonByName(params).then(({ respCode, respMsg, result }) => {
        this.isloading = false;

        if (respCode !== "0") {
          // 加载失败
          this.isloading = false;
          this.$toast.fail(respMsg);
          return;
        }
        if (isConcat) {
          _this.lessionList = _this.lessionList.concat(result.list);
        } else {
          _this.lessionList = result.list;
        }
        _this.page = result.page;

        if (_this.page.currentPage >= _this.page.totalPage) {
          this.finished = true;
        } else {
          this.finished = false;
        }
      });
    },
    // 跳转到课程详情页
    handleClickGotoLessionDetail(item) {
      // this.$router.push({
      //   path: `/lession/detail`,
      //   query: {
      //     id: `${item.lessonId}`,
      //     sid: this.$route.query.sid
      //   }
      // });
    }
  }
};
</script>

<style scoped lang="scss" src="./index.scss">
</style>
